<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入VUE库 -->
    <script src="../js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #dddddd;
        }

        .el-main {
            background-color: #999999;
        }

        .el-footer {
            background-color: #555555;
        }

        .el-aside {
            background-color: #bbb;
        }

        .el-container, html, body, #app {
            height: 100%;
            margin: 0px
        }

        .el-menu {
            background-color: transparent;
        }

        .el-menu--horizontal > .el.menu-item, .el-menu--horizontal {
            float: right;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: 0px;
        }

        .el-tabs {
            height: 100%;
        }

        .el-tabs__content {
            height: calc(100% - 80px);
        }

        div[id^='pane-'] {
            height: 100%;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <h1>xxx商城管理系统</h1>
                </el-col>
                <el-col :span="18">
                    <el-menu mode="horizontal">
                        <el-submenu>
                            <template slot="title">个人中心</template>
                            <el-menu-item>个人信息</el-menu-item>
                            <el-menu-item>我的购物车</el-menu-item>
                            <el-menu-item>我的订单</el-menu-item>
                            <el-menu-item>我的收藏</el-menu-item>
                        </el-submenu>
                        <el-menu-item>呼叫客服</el-menu-item>
                        <el-menu-item>退出</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>

        <el-container>

            <el-aside width="200px">
                <el-menu @select="doMenu">
                    <el-submenu index="sub">
                        <template slot="title">机构管理</template>
                        <el-menu-item>部门管理</el-menu-item>
                        <el-menu-item>岗位管理</el-menu-item>
                        <el-menu-item>书籍管理</el-menu-item>
                        <el-menu-item index="3">淘宝</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="1">用户管理</el-menu-item>
                    <el-menu-item index="2">书籍管理</el-menu-item>
                    <el-menu-item index="4">商品管理</el-menu-item>
                </el-menu>
            </el-aside>

            <el-main>
                <el-tabs type="border-card" v-model="current">
                    <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
                        <span v-if="tab.type=='text'">{{tab.content}}</span>
                        <div v-else-if="tab.type=='html'" v-html="tab.content" style="height: 100%"></div>
                        <iframe v-else-if="tab.type=='href'" :src="tab.content"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
        <el-main>main</el-main>
        <el-footer>footer</el-footer>
    </el-container>
</div>


<script>
    var v = new Vue({
        el: "#app",
        data: {
            tabs: [
                {title: "首页", content: "<img src='b.jpg' style='width: 100%; height: 100%'>", name: "0", type: "html"}
            ],
            tabs1: [
                {title: "用户管理", content: "用户管理", name: "1", type: "text"},
                {title: "书籍管理", content: "书籍管理.html", name: "2", type: "href"},
                {title: "淘宝", content: "http://taobao.com", name: "3", type: "href"},
                {title: "商品管理", content: "商品管理.html", name: "4", type: "href"},
            ],
            current: "0"
        },
        methods: {
            doMenu(index, indexPath) {
                console.log(index);
                if (index == null) return;
                let tab = this.tabs.find(t => t.name == index);
                if (tab) {
                    this.current = tab.name;
                } else {
                    tab = this.tabs1.find(t => t.name == index);
                    this.tabs.push(tab);
                    this.current = tab.name;
                }
            },
            delTab(name) {
                if (name == "0") return;
                this.tabs = this.tab.filter(t => t.name != name);
                this.current = '0';
            }
        }
    })
</script>

</body>
</html>